<template>
    <div :class="itemClasses">
      <div :class="headerClasses" @click="toggle">
        <img :class="isActive?'arrowDown':'arrowRight'" :src='imgSrc'/>
        <slot></slot>
      </div>
      <div :class="contentClasses" v-show="isActive">
        <div :class="boxClasses">
          <slot name="content"></slot>
        </div>
      </div>
    </div>
</template>
<script>
//css的命名空间
const prefixCls = 'ivu-collapse';
export default {
  name: 'Panel',
  props: {
    name: { //用于唯一识别当前面板
      type: String
    }
  },
  data(){
    return{
      index: 0,
      isActive: false,
      //设置内部使用状态，用于实现 v-model
      currentValue: this.value
    }
  },
  methods: {
    toggle(){
      //访问父链（即 collapse.vue）执行方法，
      this.$parent.toggle({
        //优先使用 name, 未定义是使用 index
        //index 和 isActive都在 collapse.vue中设置，
        name: this.name || this.index,
        isActive: this.isActive
      })
    }
  },
  computed: {
    imgSrc(){
      if(this.isActive){
        return require('../../assets/images/arrow_down.png');
      }
      return require('../../assets/images/arrow_right.png');
    },
    arrowIcon(){

    },
    itemClasses(){
      return [
        `${prefixCls}-item`,
        {
          [`${prefixCls}-item-active`] : this.isActive
        }
      ]
    },
    headerClasses(){
      return `${prefixCls}-header`;
    },
    contentClasses(){
      return `${prefixCls}-content`;
    },
    boxClasses(){
      return `${prefixCls}-content-box`;
    }
  },
  watch:{
    value(val){
      //从外部改变 value 时，更新内部的数据
      this.currentValue = val;
    }
  }
}
</script>

<style scoped>
.ivu-collapse-header,.ivu-collapse-content{
  text-align: left;
}
.ivu-collapse-header{
  display: flex;
  align-items: center;
}
.arrowRight{
  width:18px;
  height:16px;
}
.arrowDown{
  width:16px;
  height:14px;
}
</style>

